<template>
  <div class="common-aside">
    <!-- 侧边栏 -->
    <el-aside class="aside scroll-container">
      <!-- 垂直导航 -->
      <!-- 
        default-active当前激活菜单的index  我们不能写死 就v-bind动态数据绑定
        :default-active="$route.path"  刷新页面的时候留在当前操作的页面上 -->
      <el-menu
        router
        unique-opened
        :default-active="$route.path"
        style="border-right: none"
        background-color="#333"
        text-color="#ddd"
        active-text-color="#fff"
      >
        <el-submenu index="/actor">
          <template slot="title">
            <i class="el-icon-user-solid"> </i>
            <span slot="title">演员管理</span>
          </template>
          <el-menu-item index="/home/actor-list">
            <i class="el-icon-menu"></i>
            <span slot="title">演员列表</span>
          </el-menu-item>
          <el-menu-item index="/home/actor-add">
            <i class="el-icon-menu"></i>
            <span slot="title">新增演员</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="/director">
          <template slot="title">
            <i class="el-icon-s-custom"> </i>
            <span slot="title">导演管理</span>
          </template>
          <el-menu-item index="/home/director-list">
            <i class="el-icon-menu"></i>
            <span slot="title">导演列表</span>
          </el-menu-item>
          <el-menu-item index="/home/director-add">
            <i class="el-icon-menu"></i>
            <span slot="title">新增导演</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="/movie">
          <template slot="title">
            <i class="el-icon-video-camera-solid"> </i>
            <span slot="title">电影管理</span>
          </template>
          <el-menu-item index="/home/movie-list/">
            <i class="el-icon-menu"></i>
            <span slot="title">电影列表</span>
          </el-menu-item>
          <el-menu-item index="/home/movie-add/">
            <i class="el-icon-menu"></i>
            <span slot="title">新增电影</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="/cinmea">
          <template slot="title">
            <i class="el-icon-s-marketing"> </i>
            <span slot="title">影院管理</span>
          </template>
          <el-menu-item index="/home/cinema-list/">
            <i class="el-icon-menu"></i>
            <span slot="title">影院列表</span>
          </el-menu-item>
          <el-menu-item index="/home/cinema-add/">
            <i class="el-icon-menu"></i>
            <span slot="title">新增影院</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  name: "CommonAside",
};
</script>

<style lang="scss" scoped>
.aside {
  height: calc(100vh - 60px);
  background-color: #333;
  width: 200px;
  .el-menu-item.is-active {
    font-weight: bold;
  }
}
</style>
